<template>
  <div>
    <Row type="flex" style="margin-top: 20px" justify="center" class="code-row-bg">
      <Col span="13">
        <p class="news-list" v-for="(item,index) in newsList" :key="index" @click="showDetail(item)">
          {{formatDate(new Date(item.createTime), 'yyyy-MM-dd hh:mm')}}-{{item.title}}
        </p>
        <page-com :total="total" @page-change="pageChange"></page-com>
      </Col>
    </Row>
    <Modal v-model="show" :width="900" :title="title">
      <div v-html="context"></div>
    </Modal>
  </div>
</template>

<script>
  import PageCom from '@/components/page'
  export default {
    name: 'news',
    components: {
      PageCom
    },
    data() {
      return {
        number: 0,
        size: 20,
        total: 0,
        newsList: [],
        title: '',
        show: false,
        context: ''
      }
    },
    mounted() {
      this.getList()
    },
    methods: {
      getList() {
        this.$get('/api/api/news/page', {size: this.size, number: this.number, status: 1}).then((res) => {
          if (res.code === 0) {
            this.newsList = res.data
            this.total = res.total
          }
        })
      },
      showDetail(item) {
        this.show = true
        this.title = item.title
        this.context = item.context
      },
      pageChange(data) {
        this.number = data + 1
        this.getList()
      },
      formatDate (date, fmt) {
        if (/(y+)/.test(fmt)) {
          fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        let o = {
          'M+': date.getMonth() + 1,
          'd+': date.getDate(),
          'h+': date.getHours(),
          'm+': date.getMinutes(),
          's+': date.getSeconds()
        }
        for (let k in o) {
          if (new RegExp(`(${k})`).test(fmt)) {
            let str = o[k] + ''
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? str : this.padLeftZero(str))
          }
        }
        return fmt
      },
      padLeftZero (str) {
        return ('00' + str).substr(str.length)
      }
    }
  }
</script>

<style scoped>
  .news-list{
    margin: 10px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background: #fff;
  }
</style>
